<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>23 $apply</title>
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../lib/bootstrap3/css/dashboard.css">
    <script src="../../lib/angularjs/angular.js"></script>
</head>
<body ng-app="app">
<div class="well">
    <h3>$apply()函数接受一个可选的参数：</h3>
    <div class="list-group">
        <a href="#" class="list-group-item ">
            <h4 class="list-group-item-heading"> expression（字符串/函数）</h4>
            <p class="list-group-item-text">
                这个表达式可选地接受一个字符串或函数，并且是在当前作用域内执行。
            </p>
            <p class="list-group-item-text">
                如果传入一个字符串， $apply()首先会在这个字符串上调用$eval()，以强制Angular在局部
                作用域上下文中使用$eval()运行字符串表达式。
            </p>
            <p class="list-group-item-text">
                如果传入一个函数，这个函数将会在所传入的函数作用域上执行。
            </p>
        </a>
    </div>
</div>
<div class="well" ng-controller="ctrl">
    <p>message:{{message}}</p>
    <button type="button" ng-click="changeMessage1()">1-更新Message</button>
    <button type="button" ng-click="changeMessage2()">2-更新Message</button>
    <button type="button" ng-click="changeMessage3()">3-更新Message</button>
    <button type="button" ng-click="changeMessage4()">4-更新Message</button>
    <button type="button" ng-click="changeMessage5()">5-更新Message</button>
</div>
</body>
<script>
    var app=angular.module("app",[]);
    app.controller("ctrl",["$scope",function ($scope) {
        $scope.message="内容已初始化";
        $scope.changeMessage1=function () {
            setTimeout(function () {
                $scope.message="被changeMessage--->1修改";
            },10);
        }
        $scope.changeMessage2=function () {
            setTimeout(function () {
                $scope.$apply('message = "被changeMessage------>2修改【/ 使用要eval的字符串调用$apply示例】"');// 使用要eval的字符串调用$apply示例
            },10);
        }
        $scope.changeMessage3=function () {
            setTimeout(function () {
                $scope.$apply(function() {// 使用函数时忽略作用域
                    $scope.message= "被changeMessage------>3修改【/ 使用函数时忽略作用域】";
                });
            },10);
        }
        $scope.changeMessage4=function () {
            setTimeout(function () {
                $scope.$apply(function(scope) {// 然后在函数中使用传入作用域
                    scope.message= "被changeMessage------>4修改【// 然后在函数中使用传入作用域】";
                });
            },10);
        }
        $scope.changeMessage5=function () {
            setTimeout(function () {
                $scope.message="被changeMessage--->5修改【// 或者通过在操作的尾部调用$apply()以强制运行$digest循环】";
                $scope.$apply();// 或者通过在操作的尾部调用$apply()以强制运行$digest循环
            },10);
        }
    }]);
</script>
</html>